<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客后台</title>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.js}" type="text/javascript"></script>
    <style>
        body {
            font-size: 12px;
            margin-right: 0px;
            padding-bottom: 10px;
            font-family: Verdana;
            margin: 0;
            padding: 0;
            /* background-color: #EEEEFF; */
        }

        #hd_info {
            background: #F8F8F8;
            height: 28px;
            border-bottom: 1px solid #E5E5E5;
            position: relative;
            margin-left: 0px;
            margin-right: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        #cnts {
            padding: 4px 8px 0 8px;
            margin: auto;
        }

        #login_area {
            margin: 0px 0px 2px 0px;
            padding-top: 2px;
            text-align: right;
            font-size: 12px;
            font-family: Verdana;
            color: #5B5B5B;
            overflow: hidden;
            position: absolute;
            top: 5px;
            right: 10px;
        }

        #login_area a {
            text-decoration: none;
            color: #336699;
        }

        #header {
            margin-top: 0px;
            height: 102px;
            vertical-align: middle;
            padding-top: 0px;
        }

        #logo {
            position: absolute;
            left: 10px;
            top: 45px;
            z-index: 999;
            color: #009;;
        }
        #nickname {
            position: absolute;
            right: 10px;
            top: 45px;
            z-index: 999;
            color: #009;;
        }

        #main {
            font-size: 12px;
            font-family: Verdana;
            margin-left: 210px;
            padding-right: 0px;
            padding-top: 0px;
            background-color: #FFF;
            border: 1px solid #666;
            margin-right: 5px;
            margin-top: 0px;
        }

        #main h2 {
            margin: 0px 0px 0px 0px;
            background-color: #B6C9E7;
            padding: 3px;
            border-bottom: 1px solid #666;
            font-family: Arial;
            height: 20px;
            font-size: 13px;
        }

        h2 {
            display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            text-align: right;
        }

        #main .PagerLink {
            background-color: #B6C9E7;
            padding-bottom: 0px;
            background-color: #FFFFFF;
            padding: 4px;
            padding-bottom: 0px;
            font-family: Arial;
            font-size: 9pt;
            text-align: right;
            font-weight: normal;
            bottom: 0px;
            margin-bottom: 0px;
            margin-right: 10px;
        }

        #main h3 {
            font-size: 13px;
            padding-left: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 20px;
            background-color: #E5EEF7;
            border-top: 1px solid #666;
            border-bottom: 1px dashed #666;
            padding: 2px;
        }

        h3 {
            display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #authors {
            font-family: Verdana;
            top: 131px;
            position: absolute;
            width: 200px;
            left: 5px;
            background-color: #FAFAFA;
            border-left: 1px solid #666;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
            font-size: 12px;
            margin-top: 0px;
            padding-top: 0px;
            overflow: hidden;
        }

        #authors h2 {
            color: #FFF;
            margin-bottom: 2px;
            margin-top: 0px;
            background-color: #6B86B3;
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
            padding-top: 3px;
            padding-bottom: 3px;
            font-family: Verdana;
            font-size: 12px;
            text-align: center;
            text-transform: uppercase;
            font-weight: normal;
            width: 200px;
        }

        #authors ul {
            list-style: none;
            margin-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
            list-style-type: circle;
            padding-top: 5px;
            margin-top: 0px;
            margin-left: 5px;
            width: 190px;
            word-wrap: break-all;
        }

        ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        #authors li {
            border-bottom: 1px dotted #DDDDDD;
            margin-top: 2px;
            line-height: 20px;
            word-wrap: break-all;
            list-style: none;
        }

        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }

        #authors .NavLink a:link,
        #authors .NavLink a:active, #authors .NavLink a:visited {
            text-decoration: none;
            color: #3B5998;
        }

        a:link, a:active {
            color: #009;
        }

        a:-webkit-any-link {
            color: -webkit-link;
            cursor: pointer;
            text-decoration: underline;
        }

        .bigbox {
            width: 100%;
        }

        .field {
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 7px;
        }
        button{
            cursor: pointer;
        }
        .w-e-menu{
            z-index: 2 !important;
        }
        .w-e-text-container{
            z-index: 1 !important;
        }

    </style>
</head>
<body>
<div id="app">
    <div id="hd_info">
        <div id="cnts">
            <div id="login_area">
                  <span>
                        <a href="/logout">退出</a>
                  </span>
            </div>
        </div>
    </div>
    <div id="header">
        <div id="logo">
            <h1><i>博客后台</i></h1>
        </div>
        <div id="nickname">
            <h1><i>{{user.nickname}}</i></h1>
        </div>
    </div>
    <div id="main">
        <h2></h2>
        <div class="post">

            <h3>
                添加随笔...
            </h3>
            <div class="field">
                <p>标题</p>
                <input type="text" style="width: 100%" placeholder="请输入标题..." v-model="blog.title">
            </div>
            <div id="editor" class="editor">

            </div>
            <hr>
            <h3>
                博客类别
            </h3>
            <el-select v-model="blog.blogtypeid" placeholder="请选择"   :popper-append-to-body="false">
                <el-option v-for="obj in blogtypes"  :label="obj.typename" :value="obj.id">
                </el-option>
            </el-select>
            <hr>
            <button @click="handleAdd">提交</button>
        </div>
    </div>
    <div id="authors">
        <h2>
            操作
        </h2>
        <ul class="NavLink">
            <li class="natitle">
                <a href="/api/public/go2Index">返回首页</a>
            </li>

        </ul>
    </div>
</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            //content:博客的内容
            content: "",
            editor: null,
            //blogtypes:博客类别
            blogtypes:[],
            //博客对象
            blog:{},
            //
            user:{}
        },
        methods: {
            init: function () {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容
                this.editor.txt.html();
            },
            //提交富文本内容
            handleAdd: function() {
                console.log(this.editor.txt.html());
                console.log("this.editor.txt.text()==");
                console.log(this.editor.txt.text());
                this.blog.content = this.editor.txt.html();//提交博客内容
                this.blog.msg = this.editor.txt.text();//提交博客的摘要(由后端截取字符串)
                var that = this;
                axios.post("/api/blog/addBlog",this.blog).then(function (resp) {

                })


            },
            //查找所有博客类别
            findAllBlogTypes(){
                var that = this
                axios.get("/api/public/findAllBlogTypes").then(function (resp) {
                    that.blogtypes = resp.data.data
                })
            },
            //获取登录用户的信息
            getUser(){
                var that = this
                axios.get("/api/blog/getUser").then(function (resp) {
                    that.user = resp.data.data
                })

            }

        },
        mounted: function () {
            this.init();
            this.findAllBlogTypes();
            this.getUser();


        }
    })
</script>
</html>